<template>
  <el-card style="margin: 20px; overflow: hidden;height: 660px;">
    <el-form label-width="100px">
      <el-row :gutter="10" style="margin-top: 40px;">
       <el-col :span="12">
           <el-form-item label="使用时间">
             <el-date-picker
                 type="datetimerange"
                 range-separator="至"
                 start-placeholder="开始日期"
                 end-placeholder="结束日期"
                 value-format="YYYY-MM-DD HH:mm:ss"
                 format="YYYY-MM-DD HH:mm:ss"
                 v-model="times"
             ></el-date-picker>
         </el-form-item>

         <el-row :gutter="10" style="margin-top: 20px;">
          <el-col :span="12">
            <el-form-item label="出发点">
              <el-input v-model="saveFrom.startPoint" placeholder="请输入出发点"/>
            </el-form-item>
          </el-col>
           <el-col :span="12">
             <el-form-item label="目的地">
               <el-input v-model="saveFrom.endPoint" placeholder="请输入目的地"/>
             </el-form-item>
           </el-col>
         </el-row>

         <el-form-item label="申请原因" style="margin-top: 10px;">
           <el-input
               v-model="saveFrom.reason"
               :autosize="{ minRows: 4, maxRows: 60 }"
               maxlength="50"
               show-word-limit
               type="textarea"
               placeholder="请输入相关信息"
           />
         </el-form-item>

         <el-row :gutter="10" style="margin-top: 20px;">
          <el-col :span="12">
            <el-form-item label="使用人数">
              <el-input v-model="saveFrom.people" placeholder="请输入人数"/>
            </el-form-item>
          </el-col>
         </el-row>

       </el-col>
        <el-col :span="12">

          <el-row :gutter="10">
            <el-form-item label="审批人">
              <el-row :gutter="10">
                <el-col :span="8" v-if="auditUserOpts.length>0">
                  <el-tag type="primary">
                    <el-icon style="margin-right:5px;position:relative;top:2px;">
                      <User/>
                    </el-icon>
                    <span>{{ auditUserOpts[0].username }}</span>
                  </el-tag>
                </el-col>
                <el-col :span="8" v-if="auditUserOpts.length>1">
                  <el-tag type="primary">
                    <el-icon style="margin-right:5px;position:relative;top:2px;">
                      <User/>
                    </el-icon>
                    <span>{{ auditUserOpts[1].username }}</span>
                  </el-tag>
                </el-col>
                <el-col :span="8">
                  <el-tag type="primary">
                    <el-icon style="margin-right:5px;position:relative;top:2px;">
                      <User/>
                    </el-icon>
                    <span>{{ allocation.username }}</span>
                  </el-tag>
                </el-col>
              </el-row>
            </el-form-item>
          </el-row>
        </el-col>
      </el-row>
    </el-form>

    <el-button type="primary" @click="submit"
               style="float: right;
               width: 100px;
               margin-top: 260px">提交</el-button>

  </el-card>
</template>

<script setup>
import {onMounted, ref} from "vue";
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "@/router";

const saveFrom = ref({
  startPoint: '',
  endPoint: '',
  reason: '',
  people: '',
});
const times = ref([]);
let userInfo = getUser();
const submit = () => {
  saveFrom.value.userId = userInfo.id;
  saveFrom.value.username = userInfo.username;
  saveFrom.value.phone = userInfo.phone;
  saveFrom.value.email = userInfo.email;
  saveFrom.value.department = userInfo.department;
  saveFrom.value.type = `busrequire`;
  saveFrom.value.startTime = times.value[0];
  saveFrom.value.endTime = times.value[1];
  saveFrom.value.auditUserIdList = auditUserIdList.value;


  if (!times.value[0] || !times.value[1]){
    errorInfo('请选择使用时间')
    return
  }
  if (!saveFrom.value.startPoint || !saveFrom.value.endPoint){
    errorInfo('请输入出发点和目的地')
    return
  }
  if (!saveFrom.value.reason){
    errorInfo('请输入申请原因')
    return
  }
  if (!saveFrom.value.people){
    errorInfo('请输入使用人数')
    return
  }

  let data = qs.stringify(saveFrom.value);
  axios.post(BASE_URL + '/v1/busrequire/save', data)
      .then((response) => {
        if (response.data.code === 2000) {
          OKInfo('保存成功!');
          clearAll();
          router.push('/applicationList');
        } else {
          ElMessage({
            message: response.data.msg,
            type: 'error',
            showClose: true,
            center: true,
          });
        }
      })

}
const clearAll = () => {
  saveFrom.value.startPoint = '';
  saveFrom.value.endPoint = '';
  saveFrom.value.reason = '';
  saveFrom.value.people = '';
  times.value = [];
}

/* 查询审批人 */
const auditUserOpts = ref([]);
const auditUserIdList = ref([]);
const allocation = ref({})
const loadAuditUser = () => {
  // 获取当前登录人的直属领导id
  let leader = userInfo.leader;
  console.log(userInfo);
  console.log(userInfo.leader);
  // 根据此直属领导id查出对应的领导数
  axios.get(BASE_URL + '/v1/user/select/audit/' + leader)
      .then((response) => {
        if (response.data.code === 2000) {
          auditUserOpts.value = response.data.data;
          for (let i = 0; i < auditUserOpts.value.length; i++) {
            auditUserIdList.value.push(auditUserOpts.value[i].id);
          }
        } else {
          ElMessage({
            message: response.data.msg,
            type: 'error',
            showClose: true,
            center: true,
          });
        }
      });
};
const loadAllocation = () => {
  let role = 110;
  axios.get(BASE_URL + '/v1/user/select/allocation/' + role )
      .then((response) => {
        if (response.data.code === 2000) {
            allocation.value = response.data.data[0];
            auditUserIdList.value.push(allocation.value.id);
        } else {
          ElMessage({
            message: response.data.msg,
            type: 'error',
            showClose: true,
          })
        }
      })
}
onMounted(() => {
  loadAuditUser();
  loadAllocation();
})
</script>

<style scoped>

</style>